<template>
  <view>
    <!-- 搜索框 -->
    <search />
    <!-- 轮播图 -- 去uni-app组件里面找 组件demo实例 -->

    <!-- swiper 默认高度 150px  image默认宽高 320 * 240 -->
    <swiper circular :indicator-dots="true">
      <swiper-item v-for="item in list" :key="item.goods_id">
        <navigator :url="item.navigator_url" :open-type="item.open_type">
          <image :src="item.image_src"></image>
        </navigator>
      </swiper-item>
    </swiper>

    <!-- 导航栏 -->
    <!-- v-if  和 v-for 的优先级----- 工作不推荐放在一行 -->
    <!-- 虚拟的标签 template上面不能放 key属性 -->
    <view class="my-nav">
      <view v-for="item in navList" :key="item.name">
        <navigator v-if="item.navigator_url" :url="item.navigator_url">
          <image :src="item.image_src" mode="widthFix"></image>
        </navigator>
        <image v-else :src="item.image_src" mode="widthFix"></image>
      </view>
    </view>

    <!-- 楼层模块 -->
    <view class="m-floor">
      <view class="floor" v-for="(item, index) in floorList" :key="index">
        <view class="floor-title">
          <image :src="item.floor_title.image_src" mode="widthFix" />
        </view>
        <view class="product-list">
          <navigator
            :url="item.product_list[0].navigator_url"
            open-type="navigate"
            hover-class="none"
          >
            <image :src="item.product_list[0].image_src" mode="heightFix" />
          </navigator>
          <navigator
            v-for="child in item.product_list.slice(1)"
            :key="child.name"
            :url="child.navigator_url"
            open-type="navigate"
            hover-class="none"
          >
            <image :src="child.image_src" mode="heightFix" />
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import search from '../../components/search/search.vue';
export default {
  components: { search },
  name: 'HomeCom',
  data() {
    return {
      list: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    this.getSwiperList();
    this.getNavList();
    this.getFloorList();
  },
  methods: {
    async getSwiperList() {
      // 因为在mainjs 引入了一个  自定义拦截器语法，所以我们这里的返回值就不是 数组的格式
      // 正常情况下，以前旧版的写法是  const [err, res] = await uni.xxx
      // const res = await uni.request({
      //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      // });
      // console.log(111, res);
      // 更新数据，采用的是vue语法，直接等号赋值，不需要使用小程序的setData
      // this.setData({})
      const res = await uni.$u.http.request({
        url: '/home/swiperdata',
      });
      this.list = res.data.message;
    },
    async getNavList() {
      const res = await uni.$u.http.request({
        url: '/home/catitems',
      });
      this.navList = res.data.message;
    },
    async getFloorList() {
      const res = await uni.$u.http.request({
        url: '/home/floordata',
      });
      this.floorList = res.data.message;
    },
  },
};
</script>

<style lang="scss">
swiper {
  navigator,
  image {
    width: 100%;
    height: 100%;
  }
}

.my-nav {
  display: flex;
  justify-content: space-around;
  margin: 10px 0;
  image {
    width: 128rpx;
  }
}

.floor-title {
  image {
    width: 750rpx;
  }
}
.product-list {
  navigator {
    float: left;
    margin-left: 12rpx;
    margin-bottom: 10rpx;
    image {
      height: 188rpx;
    }
    &:nth-child(1) {
      image {
        height: 386rpx;
      }
    }
  }
}
</style>
